/* components */
import { BaseSelectUserTreeComponent, BaseSelectUserNoDataView } from '@src/component/common/BaseSelectUser/components'
/* enum */
import { BaseSelectUserComponentNameEnum, SelectUserComponentRole } from '@src/component/common/BaseSelectUser/model'
/* hooks */
import { 
  useBaseSelectUserStoreCurrentToggleRole,
  useBaseSelectUserStoreLoadingMap, 
  useBaseSelectUserStoreRoleList, 
  useBaseSelectUserStoreUserListMap 
} from '@src/component/common/BaseSelectUser/store'
import { 
  useBaseSelectUserRoleUserListParams,
  useFetchRoleUserList, useSelectUserChecked, useSelectUserCheckedItemList, useSelectUserIsShowCheckbox 
} from '@src/component/common/BaseSelectUser/hooks'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, computed, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'
/* util */
import { isFalse } from '@src/util/type'
import { getCheckedItemId } from '@src/component/common/BaseSelectUser/util'

export type RoleProps = {
  isMulti: boolean;
  value: SelectUserComponentRole[];
}

export interface RoleSetupState {
  
}

export enum RoleEmitEventNameEnum {
  Input = 'input',
  Click = 'click',
  LoadUser = 'loadUser',
}

export type RoleInstance = ComponentInstance & RoleSetupState
export type RoleVM = ComponentRenderProxy<RoleProps> & CommonComponentInstance & RoleInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserRoleLeft,
  emits: [
    RoleEmitEventNameEnum.Input,
    RoleEmitEventNameEnum.Click,
    RoleEmitEventNameEnum.LoadUser
  ],
  props: {
    /* 是否为多选状态 */
    isMulti: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    value: {
      type: Array as PropType<SelectUserComponentRole[]>,
      default: () => []
    }
  },
  setup(props: RoleProps, { emit }) {
    
    // 角色列表
    const { roleList, isRoleListEmpty, isRoleListNotEmpty } = useBaseSelectUserStoreRoleList()
    // 角色成员列表
    const { setRoleUserList } = useBaseSelectUserStoreUserListMap()
    
    // 当前选择的角色
    const { currentToggleRole, setCurrentToggleRole } = useBaseSelectUserStoreCurrentToggleRole()
    // 角色人员列表参数
    const { resetPageNum } = useBaseSelectUserRoleUserListParams()
    // 加载状态
    const { roleLoading, tabLoading } = useBaseSelectUserStoreLoadingMap()
    // 已选中数据
    const { addCheckedItem, removeCheckedItem, checkedRoleItemList } = useSelectUserCheckedItemList()
    // 复选框
    const { isShowRoleCheckbox } = useSelectUserIsShowCheckbox()
    
    // 获取角色人员列表
    const fetchRoleUserList = useFetchRoleUserList()
    
    /** 
     * @description 是否显示无数据页面
     * 1. 角色列表为空
     * 2. 且 不在加载状态
    */
    const isShowNotDataView = computed(() => {
      return isRoleListEmpty.value && isFalse(roleLoading.value)
    })
    
    /** 
     * @description 是否不显示无数据页面
    */
    const isNotShowNotDataView = computed(() => {
      return isFalse(isShowNotDataView.value) && isRoleListNotEmpty.value
    })
    
    /**
     * @description 默认选中的角色
     */
    const defaultCheckedKeys = computed(() => {
      return checkedRoleItemList.value.map(item => getCheckedItemId(item))
    })
    
    /** 
     * @description 默认展开的角色
    */
    const defaultExpandedKeys = computed(() => {
      // 默认展开第一级
      return roleList.value.map(item => getCheckedItemId(item))
    })
    
    const onRoleItemClickHandler = (value: SelectUserComponentRole) => {
      
      setCurrentToggleRole(value)
      resetPageNum()
      
      const isInit = true
      
      fetchRoleUserList(isInit).then(() => {
        emit(RoleEmitEventNameEnum.LoadUser)
      })
    }
    
    return {
      isShowNotDataView,
      isNotShowNotDataView,
      isShowRoleCheckbox,
      roleList,
      
      defaultCheckedKeys,
      defaultExpandedKeys,
      
      roleLoading,
      tabLoading,
      
      currentToggleRole,
      
      onRoleItemClickHandler
    }
    
  },
  methods: {
    /** 
    * @description 获取属性列表
    */
    getAttributes() {
      return {
        directives: [
          {
            name: 'loading',
            value: this.roleLoading && isFalse(this.tabLoading)
          }
        ]
      }
    }
  },
  render(h: CreateElement) {
    
    const attrs = this.getAttributes()
    
    return (
      <div class={BaseSelectUserComponentNameEnum.BaseSelectUserRoleLeft} {...attrs}>
        
        {/* start 角色列表页面 */}
        <BaseSelectUserTreeComponent
          v-show={this.isNotShowNotDataView}
          current-node-key={this.currentToggleRole?.id}
          default-checked-keys={this.defaultCheckedKeys}
          default-expanded-keys={this.defaultExpandedKeys}
          data={this.roleList}
          is-multi={this.isMulti}
          show-checkbox={this.isShowRoleCheckbox}
          onClick={this.onRoleItemClickHandler}
        >
        </BaseSelectUserTreeComponent>
        {/* end 角色列表 */}
        
        {/* start 无数据显示 */}
        <BaseSelectUserNoDataView v-show={this.isShowNotDataView} />
        {/* end 无数据显示 */}
        
      </div>
    )
  }
})
